<template>
  <!--模板-->
  optionAPI 风格的状态：
  <el-switch v-model="isLog"
    active-text="记日志"
    inactive-text="不记了"></el-switch>

  <br>
  <el-button type="" @click="add1">普通函数增加</el-button><br>
  <el-button type="" @click="add2">箭头函数增加</el-button><br>
  <el-button type="" @click="state.addAge2(2)">箭头函数增加</el-button><br>
  <hr>
  全局状态：{{ state }}<br><br> 
  getter的测试：<br> 
  getName：{{ state.getName }}<br> 
  getAge：{{ state.getAge }}<br> 

  <hr>
  <show-log :state="state"></show-log>

</template>

 
<script setup lang="ts">
  import { ref, watchEffect } from 'vue'
  // 显示日志
  import showLog from '../state-log/log-table.vue'

  import { useStore } from '../../../lib/main'

  import type { IStateAll } from '../../store-nf/state-all'

  const state = useStore<IStateAll>('stateAll')

  console.log('stateAll', state)

  const isLog = ref(false)
  watchEffect(() => {
    // 改动是否记录日志
    state.$isLog = isLog.value
  })
  const add1 = () => {
    state.addAge(2)
  }
  const add2 = () => {
    state.addAge2(3 )
  }

</script>